<template>
  <dv-border-box1 style="background-size: cover;" :color="['#ffeca8', 'gold']" :class="isFullScreen?'fullscreen-div':''"
                  class="back" ref="borderRef">
    <div
        style="width: 100%;height: 100%;background-size: cover;display: flex;flex-direction: column;">
      <div
          style="font-size: 32px;color: gold;margin-top: 16px;text-align: center;display: flex;flex-direction: row;padding: 0px 32px">

        <div style="display: flex;flex-direction: column;flex: 1">
          <div>
            <span style="justify-self: center;font-size: 48px">{{ userStore.race.name }}-</span>
            <span style="justify-self: center;font-size: 48px">{{ userStore.name }}</span>
          </div>


          <span v-if="showInfo" style="justify-self: center">{{ showInfo.subName }}</span>
        </div>


        <!--        <audio loop style="display: none" ref="audioPlayer" :src="warning_play_audio" controls></audio>-->

        <!--        <audio style="display: none" ref="audioPlayer2" :src="onlotterySrc" controls></audio>-->


        <ExpandOutlined v-if="!isFullScreen" @click="fullScreen" style="font-size: 18px"/>

        <CompressOutlined v-else @click="exitFullScreen" style="font-size: 18px"/>
      </div>


      <div style="flex: 1;padding: 16px 32px;display: flex;flex-direction: row">
        <div style="flex: 4;background: rgba(255,255,255,0.8);margin: 16px;border-radius: 16px">
          <div v-if="showInfo" style="display: flex;flex-direction: column;height: 100%">
            <div
                style="font-size: 32px;height: 84px;display: flex;align-items: center;border-bottom: 2px #ffffff solid">
              <div style="flex: 1">

              </div>
              <div style="flex: 1;font-weight: bolder;border-radius: 16px">
                编号:{{ showInfo.no }}
              </div>
              <div style="flex: 1">

              </div>
            </div>
            <div style="flex-grow: 1;height: 0px;">
              <div style="overflow-y: scroll;max-height: 100%">
                <div
                    :style="{'background':selectItem==item?'gold':'white','color':selectItem==item?'white':'black'}"
                    @click="selectItem = item"
                    style="display: flex;flex-direction:row;align-items:center;height: 72px;margin: 8px;border-radius: 16px;padding: 0px 16px;cursor: pointer"
                    v-for="(item,index) in showInfo.baseSubItemWithOneScoreResList">

                  <div style="font-size: 28px;font-weight: bolder;flex: 2;text-align: left">
                    {{ item.itemNo == 0 ? '总分' : item.itemName }}({{ item.minScore }} - {{ item.maxScore }})分
                  </div>
                  <div style="flex: 1">
                    <a-slider id="test" :min="item.minScore" :max="item.maxScore"
                              :value="item.baseScore==null?0:item.baseScore.conversionScore"/>

                  </div>
                  <div style="font-size: 28px;font-weight: bolder;flex: 1;text-align: center;display: flex">
                    <div style="flex: 1">
                      {{ item.baseScore == null ? '' : item.baseScore.rawScore }}
                    </div>
                    |
                    <div style="flex: 1">
                      {{ item.baseScore == null ? '' : item.baseScore.conversionScore }}
                    </div>

                  </div>

                </div>
              </div>
            </div>
            <div  @click="completeScore()" class="confirmButton" style="height: 72px;background: #ffae3a;border-radius: 16px;margin: 16px;font-size: 32px;display: flex;flex-direction: row;justify-content: center;align-items: center">
              <div style="">提交</div>
            </div>
          </div>
          <div style="display: flex;align-items: center;height: 100%;justify-content: center;font-size: 64px" v-else>
            等待中...
          </div>
        </div>

        <div style="flex: 3;background: rgba(255,255,255,0.8);margin: 16px;border-radius: 16px">
          <div v-if="selectItem" style="display: flex;flex-direction: column;height: 100%">
            <!--            <a-input size="large" v-model:value="inputValue"-->
            <!--                     :placeholder="'请输入' + selectItem.minScore + '-' +selectItem.maxScore + '分值'"/>-->
            <div
                style="height: 72px;background: white;margin: 16px;display: flex;flex-direction: row;align-items: center;justify-content: center;font-size: 32px;border-radius: 16px">
              {{
                inputValue == null || inputValue == '' ? '请输入' + selectItem.minScore + '-' + selectItem.maxScore + '分值' : inputValue
              }}
            </div>
            <div style="flex: 1;margin:0px 16px;display: flex;flex-direction: column;">
              <div style="display: flex;flex: 1">
                <div @click="input('1')" class="key">
                  <div>1</div>
                </div>
                <div @click="input('2')" class="key">
                  <div>2</div>
                </div>
                <div @click="input('3')" class="key">
                  <div>3</div>
                </div>
                <div @click="input('<')" class="key">
                  <div>
                    <ArrowLeftOutlined/>
                  </div>
                </div>
              </div>
              <div style="display: flex;flex: 1">
                <div @click="input('4')" class="key">
                  <div>4</div>
                </div>
                <div @click="input('5')" class="key">
                  <div>5</div>
                </div>
                <div @click="input('6')" class="key">
                  <div>6</div>
                </div>
                <div @click="input('-')" class="key">
                  <div>-</div>
                </div>
              </div>
              <div style="display: flex;flex: 1">
                <div @click="input('7')" class="key">
                  <div>7</div>
                </div>
                <div @click="input('8')" class="key">
                  <div>8</div>
                </div>
                <div @click="input('9')" class="key">
                  <div>9</div>
                </div>
                <div @click="input('cancel')" class="key">
                  <div style="background: #ff899b">取消</div>
                </div>
              </div>
              <div style="display: flex;flex: 1">
                <div @click="input(':')" class="key">
                  <div>：</div>
                </div>
                <div @click="input('.')" class="key">
                  <div>.</div>
                </div>
                <div @click="input('0')" class="key">
                  <div>0</div>
                </div>
                <div @click="input('confirm')" class="key">
                  <div style="background: #ffae3a">确定</div>
                </div>
              </div>
            </div>

            <div

                style="height: 72px;background: white;margin: 16px;display: flex;flex-direction: row;align-items: center;justify-content: center;font-size: 32px;font-weight: bolder;border-radius: 16px">
              输入成绩后请点击确认按钮
            </div>
          </div>
        </div>
      </div>
    </div>
  </dv-border-box1>
</template>

<script>
import ElementResizeDetector from 'element-resize-detector';
import useUserStore from "@/store/modules/user.js";
import moment from "moment/moment.js";
import {getReadyStu, updateStuScore} from "@/api/business/score.js";
import {message} from "ant-design-vue";

export default {
  name: "Index",
  data() {
    const userStore = useUserStore()
    return {
      userId: userStore.id,
      isFullScreen: false,
      userStore,
      url: window.location.host + "/baseGameApi",
      timeText: '2024-23',
      selectItem: null,
      inputValue: '',
      showInfo: null,
    }
  },
  mounted() {
    this.fullScreen();
    this.createSocket();
    let that = this;
    setInterval(() => {
      that.timeText = moment(new Date()).format("YYYY年MM月DD日 HH:mm:ss");
    }, 1000)
    this.getReadyStu();
  },
  methods: {
    completeScore(){
      console.log("dasd");
      this.showInfo = null;
      this.selectItem = null;
    },
    createSocket: function () {
      let that = this;
      console.info(this.url)
      that.websocket = null;
      /* 获取主机地址和端口号 */
      //判断当前浏览器是否支持WebSocket
      if ('WebSocket' in window) {
        if (that.userId == null) {
          console.error("userId不能为空");
          that.$message.error("userId不能为空")
          return;
        }
        that.websocket = new WebSocket("wss://" + this.url + "/webSocket/" + that.userId);
      } else {
        console.error("当前游览器不支持webSocket!");
      }
      that.websocket.onerror = function () {
        that.$message.error("连接错误")
        console.error("连接错误!");
        reconnect();
      };
      //连接关闭
      that.websocket.onclose = function () {
        reconnect();
      };
      //连接成功
      that.websocket.onopen = function () {
        that.$message.success("连接成功")
        heartCheck.start();
      }
      //收到数据
      that.websocket.onmessage = function (event) {
        let obj = JSON.parse(event.data);
        if(obj.type == "refresh"){
          that.getReadyStu();
        }
        console.log(obj)
        heartCheck.reset();      //拿到任何消息都说明当前连接是正常的
      }

      function reconnect() {
        if (reconnect.lockReconnect) return;
        reconnect.lockReconnect = true;
        setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
          that.createSocket();
          reconnect.lockReconnect = false;
        }, 3000);
      }

      let heartCheck = {
        timeout: 15000,//20min
        timeoutObj: null,
        reset: function () {
          clearTimeout(this.timeoutObj);
          this.start();
        },
        start: function () {
          this.timeoutObj = setTimeout(function () {
            // websocket.send("heart");
          }, this.timeout)
        }
      }
    },
    fullScreen() {
      this.isFullScreen = true;

    },
    exitFullScreen() {
      this.isFullScreen = false;
    },
    input(char) {
      if (char === '<') {
        if (this.inputValue.length >= 1) {

          this.inputValue = this.inputValue.slice(0, -1);
        }

      } else if (char === 'cancel') {
        this.inputValue = '';
        this.editScoreShow = false;
        this.selectItem = null;
      } else if (char === 'confirm') {
        if (this.inputValue == '') {
          return;
        }
        this.confirmScore();
      } else {
        let value = this.inputValue + char;
        if(parseFloat(value)>this.selectItem.maxScore){
          alert("超出限制")
        }else{
          this.inputValue = this.inputValue + char;
        }

      }
    },
    getReadyStu() {
      let that = this;
      getReadyStu({}).then(response => {
        console.log(response)
        that.showInfo = response.data;
      });
    },
    confirmScore() {
      console.log(this.selectItem)
      let that = this;
      let body = {
        objectType: this.showInfo.objectType,
        objectId: this.showInfo.objectId,
        count: this.selectItem.count,
        subId: this.selectItem.subId,
        itemNo: this.selectItem.itemNo,
        rawScore: this.inputValue,
      }
      const key = 'updatable';
      message.loading('上传中', key, 0);
      updateStuScore(body).then(response => {
        console.log(response);
        that.inputValue = '';
        that.editScoreShow = false;
        that.selectItem = null;
        that.getReadyStu();
        message.success({content: '上传成功!', key, duration: 2});
      });
    },
  }
}
</script>

<style>
.back {
  background-image: url('../../../assets/images/lotterybk.jpg')
}

.fullscreen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.border {
  background-image: url('../../../assets/images/border.png')
}

.keyboard {
  display: flex;
  flex-wrap: wrap;
  border-radius: 16px;
}

.key {
  flex: 1;
  padding: 8px;
  height: 100%;
}

.key div {
  border-radius: 8px;
  background: white;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bolder;
}

.key div:hover {
  cursor: pointer;
}

.key div:active {
  background: #23b3ff;
}

/*.confirmButton :active {*/
/*  background: #23b3ff;*/
/*}*/
</style>